@import '../../../components/style/themes/default';
@import '../../../components/style/mixins/index';

@picture-viewer-prefix-cls: ~'@{c7n-pro-prefix}-picture-viewer';

.@{picture-viewer-prefix-cls} {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;

  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: @text-color-dark;
  }

  &-modal {
    .@{c7n-pro-prefix}-modal {
      &-header {
        background-color: #000;
      }

      &-title,
      &-header-button {
        color: inherit;
      }

      &-content {
        background-color: rgba(0, 0, 0, .75);
      }
    }
  }

  &-btn {
    color: @text-color-dark !important;
  }

  &-picture {
    flex: 1;
    height: 100%;
    margin: 0 auto;

    .@{c7n-pro-prefix}-picture {
      width: 100%;
      height: 100%;
    }
  }
}
